import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'umi';
import { Modal, Form } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
const manageMash = (props) => {
  const { visible = false, onClose, dispatch, loading, list, handleImage } = props;
  const { show, details = {} } = visible;
  const { } = details;
  const childRef = useRef();
  useEffect(() => {
    if (!show) {
      setSelectedRowKeys([]);
    }
  }, [show]);
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const rowSelection = {
    onChange: (val, selectedRows, info) => {
      setSelectedRowKeys(selectedRows);
    },

    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),
  };
  const searchItems = [{ label: '关键词', name: 'keyword' }];
  const getColumns = [
    {
      title: '素材名称',
      dataIndex: 'materialName',
    },

    {
      title: '使用次数',
      dataIndex: 'useAmount',
    },
    {
      title: '图片',
      dataIndex: 'content',
      render: (e) => {
        const { url } = JSON.parse(e);
        return <PopImgShow width={40} url={url}></PopImgShow>;
      },
    },
  ];
  console.log(11111111111111111)
  const modalProps = {
    title: `图片素材`,
    width: 1200,
    visible: typeof visible === 'boolean' ? visible : show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    onOk: () =>
      handleImage(
        selectedRowKeys.map((item) => {
          const { content } = item;
          let imgObj = JSON.parse(content);
          const { url } = imgObj;
          return {
            ...item,
            src: url,
          };
        })[0],
      ),
  };

  return (
    <Modal {...modalProps} onCancel={onClose}>
      <TableDataBlock
        rowSelection={{
          type: 'radio',
          ...rowSelection,
        }}
        params={{
          contentType: 'image'
        }}
        cRef={childRef}
        loading={loading}
        searchItems={searchItems}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        dispatchType="liveStreaming/fetchListMaterial"
        {...list}
      ></TableDataBlock>
    </Modal>
  );
};

export default connect(({ liveStreaming, loading }) => ({
  list: liveStreaming.materialList,
  loading: loading.models.liveStreaming,
}))(manageMash);
